<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="修改时间">
        <el-date-picker
          v-model="happendTime"
          type="date"
          placeholder="选择日期"
        />
        <span>至</span>
        <el-date-picker
          v-model="happendTimeEnd"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
    </el-form>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      @fetch="getData"
    />
  </div>
</template>

<script>
  import moment from 'dayjs'
  import { parseTime } from '@/utils'
  import { customerChangeRecord } from '@/api'

  export default {
    name: 'tab-change',
    props: ['csmId'],
    data() {
      return {
        happendTime: moment(),
        happendTimeEnd: '',
        tableData: {
          column: [
            {
              prop: 'happendTime',
              label: '发生时间',
              width: 150,
              render: (h, { row }) => <span>{ row.happendTime && parseTime(row.happendTime, '{y}-{m}-{d} {h}:{i}') }</span>
            },
            // {
            //   prop: 'remark',
            //   label: '变更记录',
            //   render: (h, { row }) => {
            //     let value = `操作员[${row.operator}],将`
            //     if (row.remark.includes('订单')) {
            //       value = row.remark
            //     }
            //     if (row.remark.includes('类型的附件图片')) {
            //       // 针对附件上传的操作记录
            //       value = `操作员[${row.operator}],${row.remark}`
            //     }
            //     return <span>{value}</span>
            //   }
            // }
            {
              prop: 'remark',
              label: '变更记录',
              showOverflowTooltip: true,
              render: (h, { row }) => {
                return <span>{`操作员[${row.operator}],将${row.remark}`}</span>
              }
            }
          ],
          data: []
        }
      }
    },
    methods: {
      async getData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          csmId: String(this.csmId),
          'happendTime': this.happendTime,
          'happendTimeEnd': this.happendTimeEnd
        }
        const res = await customerChangeRecord(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style scoped>

</style>
